<template>
  <div class="app-container">
    <!-- <el-dialog title="提示" :visible.sync="dialogVisible" size="tiny">
              <span>{{tipContent}}</span>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handlerDialog">确 定</el-button>
              </span>
            </el-dialog> -->
    <el-row>
      <el-form :model="user" :rules="rules" ref="userForm" label-width="80px">
        <el-form-item label="登录账号" prop="username">
          <el-input v-model="user.username" :maxlength="11" placeholder="请输入11位手机号"></el-input>
        </el-form-item>
        <el-form-item label="账号类型" prop="roleid">
          <el-select v-model="user.roleid" placeholder="请选择账号类型">
            <el-option v-for="role in roles" :key="role.roleid" :label="role.rolename" :value="role.roleid">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row>
      <div class="block" style="text-align:center;width:300px;">
        <span class="wrapper">
          <el-button @click="saveUser('userForm')">
            <icon-svg icon-class="baocun1"></icon-svg>&nbsp;&nbsp;保存</el-button>
          <el-button @click="cancel">
            <icon-svg icon-class="quxiao"></icon-svg>&nbsp;&nbsp;取消</el-button>
        </span>
      </div>
    </el-row>
  </div>
</template>

<style scoped>
.pagination {
  text-align: center;
}

.viewBtn {
  float: right;
}

.el-input {
  width: 210px;
}

.el-select {
  width: 210px;
}
</style>

<script>
import { getRolesList, saveUser } from 'api/system';
import { validateTelno } from 'utils/validate';

export default {
  data() {
    // 效验联系电话
    const checkTelno = (rule, value, callback) => {
      if (!validateTelno(value) && value != '') {
        callback(new Error('请输入正确的手机号'));
      } else {
        callback();
      }
    };
    return {
      user: {
        username: '',
        roleid: null
      },
      roles: [],
      dialogVisible: false,
      tipContent: '',
      rules: {
        username: [
          { required: true, message: '请输入11位手机号', trigger: 'blur' },
          { validator: checkTelno, trigger: 'blur' },
        ],
        roleid: [
          { required: true, message: '请选择账号类型', trigger: 'blur' }
        ]
      },
      loading: false,
    }
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      let queryParams = {
        pageSize: 1000
      }
      getRolesList(queryParams).then(response => {
        let res = response.data;
        if (res.flag === 1) {
          for (let i = 0; i < res.data.length; i++) {
            let role = { roleid: '' + res.data[i].roleid, rolename: res.data[i].rolename };
            this.roles.push(role);
          }
        }
        this.listLoading = false;
      })
    },
    saveUser(userForm) {
      this.$refs[userForm].validate((valid) => {
        if (valid) {
          saveUser(this.user).then(response => {
            let res = response.data;
            let self = this;
            if (res.flag === 1) {
              let successMessage = res.message;
              this.$confirm(successMessage, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                showCancelButton: false,
                type: 'info'
              }).then(() => {
                console.log('哥们来这')
                self.$router.go(-1)
              }).catch(() => { });
            } else {
              let failedMessage = res.message;
              this.$alert(failedMessage, '提示信息', {
                confirmButtonText: '确定',
                callback: action => {
                }
              });
            }
          })
        }
      })
    },
    cancel() {
      this.$router.go(-1)
    },
    handlerDialog() {
      this.dialogVisible = false;
      this.$router.go(-1)
    }

  }
}
</script>